<template>
  <div class="cosmic-container-new">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="floating-orb orb-1"></div>
      <div class="floating-orb orb-2"></div>
      <div class="floating-orb orb-3"></div>
    </div>

    <div class="content-area">
      <div class="content-header">
        <div class="title-container">
          <h1 class="main-title">cosmic AI生成</h1>
          <p class="subtitle">智能化COSMIC工作量评估工具</p>
        </div>
      </div>

      <div class="form-wrapper">
        <n-form
          ref="formRef"
          :model="formModel"
          :rules="formRules"
          label-placement="top"
          size="medium"
        >
          <div class="form-grid">
            <n-form-item label="需求名称" path="requirementName" class="form-item">
              <n-input
                v-model:value="formModel.requirementName"
                placeholder="请输入需求名称"
                clearable
                class="modern-input"
              />
            </n-form-item>

            <n-form-item label="功能点个数" path="functionPointCount" class="form-item">
              <n-input-number
                v-model:value="formModel.functionPointCount"
                placeholder="请输入功能点个数"
                :min="1"
                :max="1000"
                class="modern-input-number"
              />
            </n-form-item>

            <n-form-item label="数据移动组数" path="dataMovementGroups" class="form-item">
              <n-input-number
                v-model:value="formModel.dataMovementGroups"
                placeholder="每个功能点生成几组数据移动"
                :min="1"
                :max="10"
                class="modern-input-number"
              />
            </n-form-item>

            <n-form-item label="选择模型" path="selectedModel" class="form-item">
              <n-select
                v-model:value="formModel.selectedModel"
                placeholder="请选择AI模型或手动输入"
                :options="modelOptions"
                filterable
                tag
                class="modern-select"
              />
            </n-form-item>
          </div>

          <n-form-item label="需求描述" path="requirementDescription" class="form-item full-width">
            <n-input
              v-model:value="formModel.requirementDescription"
              type="textarea"
              placeholder="请详细描述您的需求，AI将基于此生成精准的功能点..."
              :rows="3"
              class="modern-textarea"
            />
          </n-form-item>

          <div class="form-actions">
            <n-button
              type="primary"
              size="medium"
              @click="generateFunctionPoints"
              :loading="loading"
              class="generate-btn"
            >
              <template #icon>
                <div class="btn-icon">✨</div>
              </template>
              {{ loading ? '正在生成...' : '生成功能点' }}
            </n-button>
          </div>
        </n-form>
      </div>

      <!-- AI生成结果展示区域 -->
      <div v-if="functionPointBatches.length > 0" class="result-wrapper">
        <div class="result-header">
          <div class="result-title">
            <div class="result-icon">🎯</div>
            <h2>生成的功能点</h2>
          </div>
          <div class="result-actions">
            <n-button
              type="primary"
              size="small"
              @click="generateFunctionPoints"
              :loading="loading"
              class="regenerate-btn"
            >
              <template #icon>
                <div class="btn-icon">🔄</div>
              </template>
              {{ loading ? '正在生成...' : '再次生成' }}
            </n-button>
          </div>
        </div>

        <!-- 功能点批次列表 -->
        <div class="batches-container">
          <div v-for="batch in functionPointBatches" :key="batch.id" class="batch-section">
            <div class="batch-header">
              <div class="batch-meta">
                <n-tag type="info" size="small" class="batch-tag"> 批次 {{ batch.id }}</n-tag>
                <div class="batch-details">
                  <span class="batch-name">{{ batch.requirementName }}</span>
                  <span class="batch-time">{{ batch.timestamp }}</span>
                </div>
              </div>
              <div class="batch-stats">
                <span class="point-count">{{ batch.functionPoints.length }} 个功能点</span>
              </div>
            </div>

            <div class="function-points-grid">
              <div
                v-for="point in batch.functionPoints"
                :key="point.id"
                class="function-point-card"
              >
                <div class="point-content">
                  <div class="point-number">{{ point.id.split('-')[1] }}</div>
                  <!-- 可编辑的功能点文本 -->
                  <div class="point-text-container">
                    <n-input
                      v-model:value="point.content"
                      type="textarea"
                      :rows="2"
                      class="point-input"
                      @input="markAsEdited(point.id)"
                      placeholder="编辑功能点描述..."
                    />
                    <div v-if="editedPoints.has(point.id)" class="edited-indicator">
                      <n-tag type="warning" size="small">已修改</n-tag>
                    </div>
                  </div>
                  <n-button
                    type="error"
                    size="small"
                    text
                    @click="deleteFunctionPoint(batch.id, point.id)"
                    class="delete-btn"
                  >
                    <template #icon>
                      <n-icon>
                        <TrashOutline />
                      </n-icon>
                    </template>
                  </n-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 保存按钮区域 -->
        <div class="save-section">
          <div class="save-info">
            <div class="save-stats">
              <span class="total-points">总计 {{ totalFunctionPoints }} 个功能点</span>
              <span v-if="editedPoints.size > 0" class="edited-count">
                {{ editedPoints.size }} 个已修改
              </span>
            </div>
          </div>
          <div class="save-actions">
            <n-button
              type="default"
              size="medium"
              @click="resetAllEdits"
              :disabled="editedPoints.size === 0"
              class="reset-btn"
            >
              <template #icon>
                <div class="btn-icon">↺</div>
              </template>
              重置修改
            </n-button>
            <n-button
              type="primary"
              size="medium"
              @click="generateCosmicContent"
              :loading="generating"
              class="save-btn"
            >
              <template #icon>
                <div class="btn-icon">🚀</div>
              </template>
              {{ generating ? '正在生成COSMIC...' : 'AI生成COSMIC内容' }}
            </n-button>
          </div>
        </div>
      </div>

      <!-- 生成文件列表 -->
      <div v-if="generatedFiles.length > 0" class="generated-files-section">
        <div class="section-header">
          <h3 class="section-title">已生成的COSMIC文件</h3>
          <span class="file-count">共 {{ generatedFiles.length }} 个文件</span>
        </div>
        
        <div class="files-grid">
          <div 
            v-for="file in generatedFiles" 
            :key="file.id" 
            class="file-card"
          >
            <div class="file-info">
              <div class="file-header">
                <div class="file-icon">📊</div>
                <div class="file-details">
                  <h4 class="file-name">{{ file.fileName }}</h4>
                  <p class="requirement-name">{{ file.requirementName }}</p>
                </div>
              </div>
              
              <div class="file-meta">
                <div class="meta-item">
                  <span class="meta-label">生成时间:</span>
                  <span class="meta-value">{{ file.generateTime }}</span>
                </div>
                <div v-if="file.savedPath" class="meta-item">
                  <span class="meta-label">保存位置:</span>
                  <span class="meta-value" :title="file.savedPath">
                    {{ file.savedPath.length > 50 ? file.savedPath.substring(0, 50) + '...' : file.savedPath }}
                  </span>
                </div>
              </div>
            </div>
            
            <div class="file-actions">
              <n-button 
                type="primary" 
                size="small" 
                @click="redownloadFile(file)"
                class="download-btn"
              >
                <template #icon>
                  <div class="btn-icon">⬇️</div>
                </template>
                {{ file.savedPath ? '打开文件夹' : '下载' }}
              </n-button>
              
              <n-button 
                type="error" 
                size="small" 
                @click="deleteFileRecord(file.id)"
                class="delete-btn"
              >
                <template #icon>
                  <div class="btn-icon">🗑️</div>
                </template>
                删除记录
              </n-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted } from 'vue';
  import { TrashOutline } from '@vicons/ionicons5';
  import { useMessage } from 'naive-ui';
  import { invoke } from '@tauri-apps/api/core';

  const message = useMessage();

  // 状态管理
  const loading = ref(false);
  const generating = ref(false); // 替换 saving 为 generating
  const functionPointBatches = ref([]);
  const currentBatchId = ref(0);
  const editedPoints = ref(new Set()); // 跟踪被编辑的功能点
  const originalPoints = ref(new Map()); // 存储原始内容
  const generatedFiles = ref([]); // 存储生成的COSMIC文件信息

  // 计算属性
  const totalFunctionPoints = computed(() => {
    return functionPointBatches.value.reduce((total, batch) => {
      return total + batch.functionPoints.length;
    }, 0);
  });



  // AI模型选项
  const modelOptions = [
    // 通义千问系列
    { label: 'Qwen3-Max', value: 'qwen3-max' },
    { label: 'Qwen3-Max (2025-09-23)', value: 'qwen3-max-2025-09-23' },
    { label: 'Qwen3-Max Preview', value: 'qwen3-max-preview' },
    { label: 'Qwen-Plus', value: 'qwen-plus' },
    { label: 'Qwen-Plus (2025-09-11)', value: 'qwen-plus-2025-09-11' },
    { label: 'Qwen-Plus (2025-07-28)', value: 'qwen-plus-2025-07-28' },
    { label: 'Qwen-Flash', value: 'qwen-flash' },
    { label: 'Qwen-Turbo', value: 'qwen-turbo' },
    { label: 'QwQ-Plus', value: 'qwq-plus' },
    { label: 'Qwen-Long', value: 'qwen-long' },
  ];

  // 表单数据
  const formRef = ref(null);
  const formModel = reactive({
    requirementName: '',
    requirementDescription: '',
    functionPointCount: null,
    dataMovementGroups: 1, // 默认每个功能点生成1组数据移动
    selectedModel: 'qwen3-max', // 默认选择Qwen3-Max
  });

  // 表单验证规则
  const formRules = {
    requirementName: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
    requirementDescription: [{ required: true, message: '请输入需求描述', trigger: 'blur' }],
    functionPointCount: [
      {
        validator: (rule, value) => {
          if (value === null || value === undefined || value === '') {
            return new Error('请输入功能点个数');
          }
          const num = Number(value);
          if (isNaN(num) || num < 1 || num > 1000) {
            return new Error('功能点个数必须在1-1000之间');
          }
          return true;
        },
        trigger: ['blur', 'change'],
      },
    ],
    dataMovementGroups: [
      {
        validator: (rule, value) => {
          if (value === null || value === undefined || value === '') {
            return new Error('请输入数据移动组数');
          }
          const num = Number(value);
          if (isNaN(num) || num < 1 || num > 10) {
            return new Error('数据移动组数必须在1-10之间');
          }
          return true;
        },
        trigger: ['blur', 'change'],
      },
    ],
    selectedModel: [{ required: true, message: '请选择AI模型', trigger: 'change' }],
  };

  // 组件挂载时的初始化
  onMounted(() => {
    // 初始化逻辑可以在这里添加
  });

  // 标记功能点为已编辑
  const markAsEdited = (pointId) => {
    editedPoints.value.add(pointId);
  };

  // 重置所有编辑
  const resetAllEdits = () => {
    editedPoints.value.forEach((pointId) => {
      const originalContent = originalPoints.value.get(pointId);
      if (originalContent) {
        // 找到对应的功能点并恢复原始内容
        functionPointBatches.value.forEach((batch) => {
          const point = batch.functionPoints.find((p) => p.id === pointId);
          if (point) {
            point.content = originalContent;
          }
        });
      }
    });
    editedPoints.value.clear();
    message.success('已重置所有修改');
  };

  // 生成COSMIC内容
  const generateCosmicContent = async () => {
    if (functionPointBatches.value.length === 0) {
      message.warning('没有可用的功能点');
      return;
    }

    // 检查必填字段
    if (!formModel.requirementName.trim()) {
      message.warning('请填写需求名称');
      return;
    }

    if (!formModel.requirementDescription.trim()) {
      message.warning('请填写需求描述');
      return;
    }

    // 收集所有功能点
    const allFunctionPoints = [];
    functionPointBatches.value.forEach(batch => {
      batch.functionPoints.forEach(point => {
        allFunctionPoints.push(point.content);
      });
    });

    if (allFunctionPoints.length === 0) {
      message.warning('没有可用的功能点');
      return;
    }

    generating.value = true;
    try {
      // 调用后端API生成COSMIC内容
      const result = await invoke('generate_cosmic_content', {
        requirementName: formModel.requirementName,
        requirementDescription: formModel.requirementDescription,
        functionPoints: allFunctionPoints,
        dataMovementGroups: formModel.dataMovementGroups, // 使用用户设置的数据移动组数
        selectedModel: formModel.selectedModel
      });

      console.log('后端调用完成，返回结果:', result);
      
      if (result.success && result.file_path) {
        // 触发文件下载
        await downloadFile(result.file_path);
        message.success('COSMIC内容生成成功，文件已保存！');
      } else {
        message.error(result.message || 'COSMIC内容生成失败');
      }
    } catch (error) {
      console.error('生成COSMIC内容失败:', error);
      message.error('生成COSMIC内容失败: ' + error);
    } finally {
      generating.value = false;
    }
  };

  // 下载文件
  const downloadFile = async (filePath) => {
    try {
      // 提取文件名和目录
      const fileName = filePath.split('\\').pop() || filePath.split('/').pop() || 'cosmic_output.xlsx';
      const fileDir = filePath.substring(0, filePath.lastIndexOf('\\'));
      
      // 记录生成的文件信息
      const fileInfo = {
        id: Date.now(),
        fileName: fileName,
        originalPath: filePath,
        savedPath: filePath, // 直接使用生成的文件路径
        generateTime: new Date().toLocaleString(),
        requirementName: formModel.requirementName
      };
      
      // 添加到生成文件列表
      generatedFiles.value.unshift(fileInfo);
      
      // 显示文件已生成并自动打开文件夹的消息
      message.success(`文件已生成: ${fileName}，文件夹已自动打开`, {
        duration: 8000,
        closable: true
      });
      
    } catch (error) {
      console.error('处理文件失败:', error);
      message.error('处理文件失败: ' + error);
    }
  };

  // 再次下载文件
  const redownloadFile = async (fileInfo) => {
    try {
      // 直接打开文件所在的文件夹
      const { invoke } = await import('@tauri-apps/api/core');
      
      // 调用后端命令打开文件夹
      await invoke('open_folder', { folderPath: fileInfo.originalPath });
      
      message.success(`已打开文件所在文件夹: ${fileInfo.fileName}`, {
        duration: 5000,
        closable: true
      });
    } catch (error) {
      console.error('打开文件夹失败:', error);
      message.error('打开文件夹失败: ' + error);
    }
  };

  // 删除文件记录
  const deleteFileRecord = (fileId) => {
    const index = generatedFiles.value.findIndex(file => file.id === fileId);
    if (index !== -1) {
      generatedFiles.value.splice(index, 1);
      message.success('文件记录已删除');
    }
  };

  // 生成功能点
  const generateFunctionPoints = () => {
    formRef.value?.validate(async (errors) => {
      if (!errors) {
        loading.value = true;
        try {
          const result = await callAIAPI({
            requirementName: formModel.requirementName,
            requirementDescription: formModel.requirementDescription,
            functionPointCount: formModel.functionPointCount,
            selectedModel: formModel.selectedModel,
          });

          if (result && result.success && result.function_points) {
            currentBatchId.value++;
            const newBatch = {
              id: currentBatchId.value,
              timestamp: new Date().toLocaleString(),
              requirementName: formModel.requirementName,
              functionPoints: result.function_points
              .filter((point) => {
                // 过滤掉标题行和空行
                const trimmedPoint = point.trim();
                return trimmedPoint && 
                       !trimmedPoint.startsWith('功能点清单') && 
                       !trimmedPoint.match(/^功能点清单\s*（\s*共\s*\d+\s*个\s*）\s*：?\s*$/);
              })
              .map((point, index) => {
                const pointId = `${currentBatchId.value}-${index + 1}`;
                const pointData = {
                  id: pointId,
                  content: point,
                  batchId: currentBatchId.value,
                };
                // 存储原始内容
                originalPoints.value.set(pointId, point);
                return pointData;
              }),
            };
            functionPointBatches.value.unshift(newBatch);
            message.success('功能点生成成功！');
          } else {
            message.error('AI返回数据格式错误');
          }
        } catch (error) {
          console.error('生成功能点失败:', error);
          // 解析错误信息并显示给用户
          let errorMessage = '生成功能点失败';

          if (typeof error === 'string') {
            try {
              const errorObj = JSON.parse(error);
              if (errorObj.error && errorObj.error.message) {
                errorMessage = `API错误: ${errorObj.error.message}`;
              }
            } catch (parseError) {
              errorMessage = `请求失败: ${error}`;
            }
          } else if (error.message) {
            errorMessage = `错误: ${error.message}`;
          }

          message.error(errorMessage);
        } finally {
          loading.value = false;
        }
      } else {
        message.error('请完善表单信息');
      }
    });
  };

  // 删除功能点
  const deleteFunctionPoint = (batchId, pointId) => {
    const batchIndex = functionPointBatches.value.findIndex((batch) => batch.id === batchId);
    if (batchIndex !== -1) {
      const pointIndex = functionPointBatches.value[batchIndex].functionPoints.findIndex(
        (point) => point.id === pointId
      );
      if (pointIndex !== -1) {
        functionPointBatches.value[batchIndex].functionPoints.splice(pointIndex, 1);
        // 清理相关数据
        editedPoints.value.delete(pointId);
        originalPoints.value.delete(pointId);

        if (functionPointBatches.value[batchIndex].functionPoints.length === 0) {
          functionPointBatches.value.splice(batchIndex, 1);
        }
        message.success('功能点已删除');
      }
    }
  };

  // 调用AI接口
  const callAIAPI = async (data) => {
    try {
      const response = await invoke('generate_function_points', {
        requirementDescription: data.requirementDescription,
        functionPointCount: data.functionPointCount,
        selectedModel: data.selectedModel,
      });
      console.log(response);
      return response;
    } catch (error) {
      console.error('API调用失败:', error);
      // 直接抛出错误，让上层处理
      throw error;
    }
  };

  // 重置表单
  const resetForm = () => {
    if (formRef.value) {
      formRef.value.restoreValidation();
    }
    Object.assign(formModel, {
      requirementName: '',
      requirementDescription: '',
      functionPointCount: null,
      author: '',
      writeTime: getCurrentDate(), // 重置时重新获取当前日期
      selectedModel: 'qwen3-max', // 重置为默认模型
    });
    functionPointBatches.value = [];
    currentBatchId.value = 0;
    editedPoints.value.clear();
    originalPoints.value.clear();
  };

  // 暴露方法给父组件
  defineExpose({
    resetForm,
  });
</script>

<style scoped>
  .bg-decoration {
    display: none;
  }

  .content-area {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .content-header {
    text-align: center;
    margin-bottom: 32px;
  }

  .title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .main-title {
    font-size: 36px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.5px;
  }

  .subtitle {
    font-size: 16px;
    color: #64748b;
    margin: 0;
    font-weight: 400;
  }

  .form-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
  }

  .form-item {
    margin-bottom: 16px;
    width: 100%;
  }

  .full-width {
    grid-column: 1 / -1;
  }

  .modern-input,
  .modern-input-number,
  .modern-textarea {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
  }

  .modern-input:focus,
  .modern-input-number:focus,
  .modern-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }

  .readonly-input {
    background-color: #f8fafc;
    color: #64748b;
  }

  .readonly-input :deep(.n-input__input-el) {
    background-color: #f8fafc !important;
    color: #64748b !important;
    cursor: not-allowed;
  }

  .form-actions {
    text-align: center;
    margin-top: 20px;
  }

  .generate-btn {
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    padding: 0 32px;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .generate-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .btn-icon {
    font-size: 16px;
  }

  .result-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
  }

  .result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
  }

  .result-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }

  .result-icon {
    font-size: 24px;
  }

  .result-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
  }

  .result-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .regenerate-btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .regenerate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .batches-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .batch-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
  }

  .batch-section:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .batch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
  }

  .batch-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }

  .batch-tag {
    font-weight: 600;
  }

  .batch-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .batch-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
  }

  .batch-time {
    font-size: 12px;
    color: #64748b;
  }

  .batch-stats {
    display: flex;
    align-items: center;
  }

  .point-count {
    font-size: 12px;
    color: #64748b;
    background: #e2e8f0;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
  }

  .function-points-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .function-point-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  .function-point-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
  }

  .point-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .point-number {
    background: #3b82f6;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .point-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .point-input {
    width: 100%;
    font-size: 13px;
    line-height: 1.4;
  }

  .point-input :deep(.n-input__textarea) {
    border: none;
    transition: all 0.2s ease;
    resize: unset;
  }

  .point-input :deep(.n-input__textarea:focus) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }

  .delete-btn {
    opacity: 0;
    transition: all 0.2s ease;
    color: #ef4444;
    flex-shrink: 0;
    cursor: pointer;
    padding: 2px;
  }

  .function-point-card:hover .delete-btn {
    opacity: 1;
  }

  .delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
  }

  .edited-indicator {
    display: flex;
    justify-content: flex-start;
  }

  .save-section {
    margin-top: 24px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .save-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .save-stats {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .total-points {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .edited-count {
    font-size: 12px;
    color: #f59e0b;
    background: #fef3c7;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
  }

  .save-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .reset-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 24px;
    height: 40px;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 14px;
  }

  .reset-btn:hover:not(:disabled) {
    background: #e5e7eb;
    border-color: #9ca3af;
    transform: translateY(-1px);
  }

  .reset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .save-btn {
    background: #10b981;
    border: none;
    border-radius: 6px;
    padding: 0 24px;
    height: 40px;
    font-weight: 600;
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
    transition: all 0.2s ease;
    min-width: 140px;
    cursor: pointer;
    font-size: 14px;
  }

  .save-btn:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  /* 生成文件列表样式 */
  .generated-files-section {
    margin-top: 40px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
  }

  .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-title::before {
    content: '📁';
    font-size: 24px;
  }

  .file-count {
    background: #e0f2fe;
    color: #0277bd;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
  }

  .files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
  }

  .file-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .file-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
  }

  .file-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
  }

  .file-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f9ff;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .file-details {
    flex: 1;
    min-width: 0;
  }

  .file-name {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
    word-break: break-all;
  }

  .requirement-name {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    word-break: break-all;
  }

  .file-meta {
    margin-bottom: 16px;
  }

  .meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
  }

  .meta-label {
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 60px;
  }

  .meta-value {
    color: #374151;
    word-break: break-all;
    flex: 1;
  }

  .file-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  .download-btn {
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    padding: 0 12px;
    height: 32px;
    font-weight: 500;
    color: white;
    font-size: 12px;
    transition: all 0.2s ease;
  }

  .download-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
  }

  .delete-btn {
    background: #ef4444;
    border: none;
    border-radius: 6px;
    padding: 0 12px;
    height: 32px;
    font-weight: 500;
    color: white;
    font-size: 12px;
    transition: all 0.2s ease;
  }

  .delete-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
  }

  .btn-icon {
    font-size: 14px;
  }
</style>
